<template>
	<view :class="addBuy?'goods-combo goods-combo_addbuy':'goods-combo'">
		<view class="combo-wrap" :style="addBuy ? `width: ${comboProducts.length * 230}rpx ` : ''">
			<view class="options" v-for="(item, index) in comboProducts" :key="item.productId">
				<div :class="item.mutex?'combo-content mutex':'combo-content'">
					<view class="img-desc-price" :style="imgHeight ? `height: ${imgHeight}rpx;` : ''">
						<image class="goods-img" :src="item.itemImg" mode="aspectFill" lazy-load></image>
						<view class="desc overflow-ellipsis" v-if="item.conFeatures && !addBuy">{{item.conFeatures}}</view>
						<view class="price" v-if="item.price">
							<view class="sale"><text class="symbol">￥</text>{{item.price}}</view>
							<view class="origin" v-if="addBuy">￥{{item.oldPrice}}</view>
						</view>
						<view class="choose" v-if="chooseType===1 && item.kucun" @click="onChooseProduct(index)">
							<view :class="item.isSelected?'l-radio active':'l-radio'">
								<text class="iconfont icon-duihuanchenggongtubiao"></text>
							</view>
						</view>
						<view class="soldOut-mark" v-if="!item.kucun">
							<text class="txt">售罄</text>
						</view>
					</view>
					<view class="name">{{item.name}}</view>
					<view class="num-choose" v-if="chooseType===2">
						<stepper :isShowZero="true" :fromOrigin="1" :itemNum="item.num" :min="item.min" :max="item.max" :sum="comboSum"
						 :maxQty="comboInfo.maxQty" @handleAdd="handleAdd(index)" @handleMinus="handleMinus(index)">
						</stepper>
					</view>
				</div>
			</view>
		</view>

	</view>
</template>

<script>
	import data from './goods-combo.js';
	export default data;
</script>

<style lang="less" scoped>
	@import "~@/common/styles/common.less";
	@import './goods-combo.less';
</style>
